@import '@influxdata/clockface/dist/variables.scss';
.refresh-form-header {
  padding: 0 $cf-space-l;
}

.refresh-form-body {
  padding: $cf-space-m $cf-space-l;
}

.refresh-form-container {
  padding-top: $cf-space-l;
}

.refresh-form-container-title {
  padding-bottom: $cf-space-xs;
}

.refresh-form-container-description {
  color: $cf-grey-65;
  padding-bottom: $cf-space-xs;
}

.refresh-form-container-child {
  flex: 1;
  &.active {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  &.inactive {
    display: grid;
    grid-template-columns: 1fr;
  }
}

.refresh-form-buttons {
  display: flex;
  justify-content: flex-end;
  padding: $cf-space-s $cf-space-3xs $cf-space-2xs $cf-space-3xs;
}

.refresh-form-cancel-button {
  width: 100px;
  justify-self: end;
}

.refresh-form-activate-button {
  width: 100px;
}

.timerange-dropdown {
  justify-self: end;
  width: 100%;
  padding-top: $cf-space-xs;
}

.refresh-input {
  width: 210px;
}

.refresh-inactivity-timeout-container {
  width: 210px;
  display: flex;
}

.refresh-inactivity-timeout-num {
  flex: 1;
  padding-right: $cf-space-2xs;
}

.refresh-inactivity-timeout-unit {
  flex: 1 0 20px;
}
